<script setup>
import { reactive, ref, defineProps, watch } from "vue";

const props = defineProps(["tagGraph"]);
let LineModel = reactive({
  lineType: "normal",
  strokeWidth: "",
  strokeDashArray: []
});
const lineTypeoptions = [
  {
    label: "实线",
    value: "normal",
    strokeDashArray: []
  },
  {
    label: "虚线1",
    value: "dotted1",
    strokeDashArray: [117.00298820694307, 52.0013280919747]
  },
  {
    label: "虚线2",
    value: "dotted2",
    strokeDashArray: [65.00166011496837, 26.00066404598735]
  },
  {
    label: "虚线3",
    value: "dotted3",
    strokeDashArray: [26.0000072551327, 13.00000362756635]
  },
  {
    label: "虚线4",
    value: "dotted4",
    strokeDashArray: [
      65.00001813783174, 26.0000072551327, 13.00000362756635, 26.0000072551327
    ]
  },
  {
    label: "虚线5",
    value: "dotted5",
    strokeDashArray: [
      65.00001813783174, 26.0000072551327, 13.00000362756635, 26.0000072551327,
      13.00000362756635, 26.0000072551327
    ]
  },
  {
    label: "虚线6",
    value: "dotted6",
    strokeDashArray: [
      117.00889954861952, 26.001977677471004, 39.002966516206506,
      26.001977677471004
    ]
  },
  {
    label: "虚线7",
    value: "dotted7",
    strokeDashArray: [13.00000362756635, 13.00000362756635]
  }
];
// 监听tagGraph的变化
watch(
  () => props.tagGraph,
  newVal => {
    if (newVal) {
      const activeObject = newVal.getActiveObject();
      if (activeObject) {
        console.log(activeObject);
        LineModel.lineType = activeObject.lineType || "normal";
        LineModel.strokeWidth = (activeObject.strokeWidth / 7.5).toFixed(1);
        LineModel.strokeDashArray = activeObject.strokeDashArray;
      }
    }
  },
  {
    immediate: true
  }
);
const handleChangeLineData = ({ lineType, strokeWidth }) => {
  const activeObject = props.tagGraph.getActiveObject();
  if (activeObject) {
    activeObject.set({
      strokeWidth: strokeWidth * 7.5
    });
    props.tagGraph.setCustomProperties("lineType", lineType);
    activeObject.set({
      strokeDashArray: lineTypeoptions.find(
        item => item.value === LineModel.lineType
      ).strokeDashArray
    });
    props.tagGraph.saveState();
    props.tagGraph.canvas.renderAll();
  }
};
</script>

<template>
  <div>
    <el-form label-position="top">
      <el-form-item label="线条类型">
        <el-select
          v-model="LineModel.lineType"
          style="width: 100%"
          @change="handleChangeLineData(LineModel)"
        >
          <el-option
            v-for="(item, index) in lineTypeoptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
            <template #default>
              <div style="display: flex; align-items: center">
                <span>{{ item.label }}</span>
                <svg width="100" height="10" style="margin-left: 10px">
                  <line
                    x1="0"
                    y1="5"
                    x2="100"
                    y2="5"
                    :stroke="'black'"
                    stroke-width="2"
                    :stroke-dasharray="item.strokeDashArray.join(',')"
                  />
                </svg>
              </div>
            </template>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="线条宽度">
        <el-input
          v-model="LineModel.strokeWidth"
          @input="handleChangeLineData(LineModel)"
        >
          <template #append>mm</template>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
